<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleDialogClose"
    :lock-scroll="false"
    :close-on-click-modal="showMobilePage"
    :modal-append-to-body="false"
    :class="{'global-mobile-dialog': showMobilePage}"
    class="subcribe-common-dialog small-common-dialog-size"
  >
    <DialogTitle :title="isEdit ? '编辑部门' : '添加部门'" font-size="16px" style="margin-bottom:20px;"/>
    <el-form
      ref="deptCreateForm"
      :model="deptData"
      :rules="rules"
      :label-position="showMobilePage?'top':'right'"
      label-width="96px"
      class="lineHeight32 mb0">
      <el-form-item label="部门名称" prop="deptName">
        <el-input v-model="deptData.deptName" :disabled="!deptData.isCustom && isEdit" :maxlength="50" clearable size="small" placeholder="最多50字符，不可重复" />
      </el-form-item>
      <el-form-item label="上级部门" prop="parentId">
        <el-cascader
          v-model="deptData.parentId"
          :show-all-levels="false"
          :options="deptTreeList"
          :props="{ emitPath:false, value: 'dingdingDeptId', label: 'name', checkStrictly: true, multiple: false }"
          :disabled="!deptData.isCustom && isEdit"
          filterable
          placeholder="请选择"
          popper-class="cascader-label-max-width-14em"
          size="small"
          clearable
        >
          <template slot-scope="{ data }">
            <el-tooltip v-if="data.name.length > 14" placement="top-start" effect="dark">
              <div slot="content" style="max-width: 150px;">{{ data.name }}</div>
              <span class="inline-tag ellipsisOne">{{ data.name }}</span>
            </el-tooltip>
            <span v-else>{{ data.name }}</span>
          </template>
        </el-cascader>
      </el-form-item>
      <el-form-item label="是否经营体" prop="isBusinessEntiy">
        <el-radio-group v-model="deptData.isBusinessEntiy">
          <el-radio :label="1"><span>是</span></el-radio>
          <el-radio :label="0"><span>否</span></el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button class="ok" type="primary" @click="handleConfirm">{{ isEdit ? '保存' : '确定' }}</el-button>
      <el-button class="cancel-btn-style" type="info" @click="handleDialogClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import DialogTitle from '@/components/Title';
import FilterCascader from '@/components/Common/filterCascader';
import { mapState } from 'vuex';

export default {
  name: 'DeptDialog',
  components: {
    DialogTitle,
    FilterCascader
  },
  model: {
    prop: 'deptValues',
    event: 'change'
  },
  props: {
    deptValues: {
      type: Object,
      default: () => {
        return {};
      }
    },
    deptTreeList: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      modalMaskDom: null
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    deptData: {
      get() {
        return this.deptValues;
      },
      set(val) {
        this.$emit('change', val);
      }
    },
    rules() {
      return {
        'deptName': [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
        'parentId': [{ required: true, message: '请选择上级部门', trigger: 'change' }],
        'isBusinessEntiy': [{ required: true, message: '请选择经营体', trigger: 'change' }]
      };
    }
  },
  watch: {
    loading(val) {
      const modalMaskDom = document.querySelector('.v-modal');
      modalMaskDom && (modalMaskDom.style.zIndex = val ? -1 : 2000);
    }
  },
  methods: {
    handleDialogClose() {
      this.$refs['deptCreateForm'].resetFields();
      this.$emit('handleCancel');
      this.dialogVisible = false;
    },
    handleConfirm() {
      this.$refs['deptCreateForm'].validate(valid => {
        if (valid) {
          this.isEdit ? this.$emit('handleDeptEdit') : this.$emit('handleDeptCreate');
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
  margin-top: 25px;
  .ok {
    width: 120px;
    font-size: 16px;
    padding: 8px 20px;
  }
  .cancel-btn-style {
    font-size: 14px;
    padding: 8px 20px;
    margin-left: 16px !important;
  }
}
::v-deep .el-form-item__content {
  width: 240px;
  margin-left: 0 !important;
  .el-input__suffix {
    display: flex;
    align-items: center;
  }
  .el-input__inner {
    height: 32px;
    line-height: 32px;
    width: 240px;
    font-size: 14px;
  }
}
::v-deep .el-form-item {
  display: flex;
  justify-content: center;
}
.global-mobile-dialog {
  ::v-deep .el-form-item {
    display: block !important;
  }
}
</style>
